<template>
	<view class="index_class">

		<view class="cash-cont">
			<div class="cash_list">
				<div class="cash_tit">
					<span>{{$t('余额转账')}}</span>
				</div>
				<div class="extract">
					<span>{{$t('收款方手机号')}}</span>
					<div class="money">
						<input type="digit" v-model="phone" :placeholder="$t('请输入对方手机号')"
							placeholder-style="font-szie:28upx;">
					</div>
				</div>
				<div class="extract">
					<span>{{$t('转账金额')}}</span>
					<div class="money">
						<text>{{$t('¥')}}</text>
						<input type="digit" v-model="withdrawMoney" :placeholder="$t('请输入提现金额')"
							placeholder-style="font-szie:28upx;">
					</div>
				</div>
				<div class="withdrawable">
					{{$t('可转账金额')}}: <span>{{$t('¥')}}{{withdrawInfo.max_money}}</span>
				</div>

			</div>


			<view class="settled">
				<view class="person-button">
					<button type="warn" class="btn" @click="submitWithdraw">{{$t('确定转账')}}</button>
				</view>
				<view class="btn-text">请确定好到账方的手机号</view>
			</view>
			
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="payTipShow" :show-cancel-button="true" :content="$t('请先设置支付密码')" confirm-color="#FA3F3F" :cancel-text="$t('取消')" :confirm-text="$t('去设置')" :show-title="false" @confirm="$u.route('pagesB/setting/setPayPwd')" ref="uModal" ></u-modal>
<!-- 支付密码 -->
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="keyboardShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{withdrawInfo.type_name}}</text>
					<view class="u-padding-10 close" data-flag="false" @click="showKeyboard(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" active-color="#fa3534" :dot-fill="true"
						v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">{{$t('请输入支付密码')}}</view>
			</view>
		</u-keyboard>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				withdrawInfo: {},
				phone: '',
				withdrawMoney: 0, // 提现金额
				withdrawType: 1, // 1-余额提现，2-佣金提现
				keyboardShow: false,
				password: '',
				payTipShow: false
			}
		},
		onLoad(option) {
			this.getWithdrawInfo()
		},
		onShow() {
		},
		methods: {
			// 获取余额提现信息
			getWithdrawInfo(){
				this.$http.getBalanceWithdrawInfo({
					type: this.withdrawType
				}).then(res=>{
					this.withdrawInfo = res.data.withdraw_info
					console.log(this.withdrawInfo)
				})
			},
			/**
			 * 提现到银行卡
			 */
			submitWithdraw() {
				if(this.withdrawInfo.paypwd == 0){
					this.payTipShow = true;
					return false;
				}
				if(parseFloat(this.withdrawMoney) < 1){
					return this.$toast(this.$t('最小转账金额为')+'：1');
				}
				if(this.phone.length !== 11){
					return this.$toast('请输入正确手机号');
				}
				
				this.keyboardShow = true;
			},
			doWithdraw(){
				this.$http.doZhuanzhang({
					paypwd: this.password,
					phone: this.phone,
					price: Math.round(this.withdrawMoney*100)/100,
					bankCardId: 0,
				}).then(res=>{
					if(res.status == 200){
						this.$toast(res.mess)
						setTimeout(()=>{
							this.$u.route('pagesC/wallet/zhuanzhang')
						},1500)
					}
				});
			},
			showKeyboard(flag = true) {
				this.password = '';
				this.keyboardShow = flag;
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
			
				if (this.password.length >= 6) {
					this.doWithdraw();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			
			finish(e) {
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "uview-ui/index.scss";

	.settled {
		background-color: transparent !important;
	}

	.btn-text {
		text-align: center;
		margin-top: 17upx;
		font-size: 26upx;
		color: #999;
	}

	.withdrawable {
		position: relative;
	}

	.settess {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 26upx;
	}

	.u-indent-0 {
		text-indent: 0;
	}

	.cashbank {
		display: flex;
		align-items: center;
		padding-bottom: 20upx !important;
		margin-top: 20upx !important;

		.cashimg {
			width: 90upx;
			height: 73upx;
			margin-right: 20upx;
		}

		.cashname {
			display: flex;
			flex-direction: column;

		}
	}
	.money {
		font-size: 40rpx;
		color: #333;
		position: relative;
	
		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	
</style>
